<template xmlns="http://www.w3.org/1999/html">
    <div style="20px ">
        <el-col :span="24" class="c">
            <el-col :span="6"  class="a">账户手机号码</el-col>
            <el-col :span="12" class="b" v-model="phone" >{{phone}}</el-col>
        </el-col>
        <el-col :span="24" class="c">
            <el-col :span="6" class="a">佣金</el-col>
            <el-col :span="12"class="b" >{{all.brokerage_price}}</el-col>
        </el-col>
        <el-col :span="24" class="c">
        <el-col :span="6" class="a">提现方式</el-col>
            <el-col :span="12"class="b" > <el-button type="primary" plain  @click="open">设置支护宝</el-button></el-col>
        </el-col>
            <el-col :span="24" class="c">
        <el-col :span="6" class="a">申请提现金额</el-col>
                <el-col :span="12"class="b" >
                    <el-input v-model="all.brokerage_price" ></el-input>
                </el-col>
                <el-col :span="24" class="c">
        <el-col :span="6" class="a">验证码</el-col>
                <el-col :span="12" class="b">
                    <el-col :span="15"><el-input type="text" v-model="form.tu_code" autoComplete="on" placeholder="验证码" /></el-col>
                    <input type="button" class="btn" :disabled="countFlag" @click="btn" v-model="btnMsg == null ? countNum+'s后重新发送' : btnMsg"></el-col>
                </el-col>
                </el-col>
        <el-col :span="24">
            <el-button type="primary" plain class="submit">申请提现</el-button></el-col>





    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {btn_code } from '@/api/login'

  export default {
    name: 'withdraw',
    data() {
      return {
        form: {
          tu_code: '',
          account: '18716798410',
        },
        name:'',
        word:'',
        countNum: 6,
        btnMsg: '点击发送验证码',
        countFlag: false,
      }
    },
    computed: {
      ...mapGetters([
        'phone',
        'all'
      ]),
    },
    methods: {
      btn() {
        this.btnMsg = null
        // 更改btn状态
        this.countFlag = !this.countFlag
        // 设置倒计时
        this.intervalBtn = setInterval(() => {
          if (this.countNum <= 0) {
            // 重置btn提示信息
            this.btnMsg = '点击发送验证码'
            // 清除定时器
            clearInterval(this.intervalBtn)
            // 更改btn状态
            this.countFlag = !this.countFlag

            // 重置倒计时状态
            this.countNum = 5
          }
          // 倒计时
          this.countNum--
        }, 1000)
        btn_code({ account: this.phone })
          .then(function(response) {
            console.log(response)
          }).catch(error => {
          console.log(error)
        })
      },
      open() {

        },
      }
    }

</script>

<style scoped>
.a{
    text-align: right;
    margin: 5px;
}
    .b{
        margin: 5px;
    }
    .c{
        height: 50px;
        line-height: 50px;
    }
    .btn{
        color: #409EFF;
        background: #ecf5ff;
        border-color: #b3d8ff;
        height: 40px;
    }
    .submit{
        position: absolute;
        left: 550px;
        top: 315px;
    }

</style>
